<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>轮廓线</title>
  <style>
    body {
      padding: 100px;
    }

    article {
      border: solid 1px red;
      /* outline-style: double;
      outline-width: 30px;
      outline-color: #ddd; */
      outline: solid 1px #ddd;
      height: 300px;
      width: 300px;
    }

    div {
      /* 130 130*/
      padding: 30px 50px 100px 80px
    }

    * {
      margin: 0;
      padding: 0;
    }

    h2 {
      background: green;
    }
    /* 去掉input 标签轮廓线，可以使用伪类，也可以直接用input */
    input:focus {
      outline: none;
    }
  </style>
</head>

<body>
  <input type="text" name="title">

  <article>
    <!-- <a href="">MYSQL</a> -->
    <!-- <a href="">CSS</a> -->
    <div>houdunren.com</div>
  </article>
  <!-- 轮廓线不占空间，所以h2会被挡住 -->
  <h2>houdunren</h2>
</body>

</html>